<!-- DEFAULT -->
<div class="color" layout="row" layout-wrap layout-align="center center">
    <div class="md-accent-bg" flex="100" layout="row" layout-padding>
        <div flex>Default</div>
        <div flex>{{vm.themes.active.theme.accent.color}}</div>
        <div flex>.md-accent-bg</div>
    </div>

    <div class="md-accent-bg" flex="100" layout="row" layout-padding>
        <div flex>Primary Text</div>
        <div flex>{{vm.themes.active.theme.accent.contrast1}}</div>
        <div flex>.md-accent-bg</div>
    </div>

    <div class="md-accent-bg" flex="100" class="secondary-text" layout="row" layout-padding>
        <div class="secondary-text" flex>Secondary Text / Icon</div>
        <div class="secondary-text" flex>{{vm.themes.active.theme.accent.contrast2}}</div>
        <div class="secondary-text" flex>.md-accent-bg .secondary-text</div>
    </div>

    <div class="md-accent-bg" flex="100" class="hint-text" layout="row" layout-padding>
        <div class="hint-text" flex>Hint Text / Disabled Text</div>
        <div class="hint-text" flex>{{vm.themes.active.theme.accent.contrast3}}</div>
        <div class="hint-text" flex>.md-accent-bg .hint-text</div>
    </div>

    <div class="md-accent-bg" flex="100" class="divider" layout="row" layout-padding>
        <div class="fade-text" flex>Fade Text / Divider</div>
        <div class="fade-text" flex>{{vm.themes.active.theme.accent.contrast4}}</div>
        <div class="fade-text" flex>.md-accent-bg .divider</div>
    </div>

    <div flex="100" class="md-accent-fg" layout="row" layout-padding>
        <div flex>As foreground color</div>
        <div flex>{{vm.themes.active.theme.accent.color}}</div>
        <div flex>.md-accent-fg</div>
    </div>
</div>
<!-- / DEFAULT -->

<!-- HUE-1 -->
<div class="color" layout="row" layout-wrap layout-align="center center">
    <div class="md-accent-bg md-hue-1" flex="100" layout="row" layout-padding>
        <div flex>Hue 1</div>
        <div flex>{{vm.themes.active.theme.accent.hue1.color}}</div>
        <div flex>.md-accent-bg .md-hue-1</div>
    </div>

    <div class="md-accent-bg md-hue-1" flex="100" layout="row" layout-padding>
        <div flex>Primary Text</div>
        <div flex>{{vm.themes.active.theme.accent.hue1.contrast1}}</div>
        <div flex>.md-accent-bg</div>
    </div>

    <div class="md-accent-bg md-hue-1" flex="100" class="secondary-text" layout="row" layout-padding>
        <div class="secondary-text" flex>Secondary Text / Icon</div>
        <div class="secondary-text" flex>{{vm.themes.active.theme.accent.hue1.contrast2}}</div>
        <div class="secondary-text" flex>.md-accent-bg .md-hue-1 .secondary-text</div>
    </div>

    <div class="md-accent-bg md-hue-1" flex="100" class="hint-text" layout="row" layout-padding>
        <div class="hint-text" flex>Hint Text / Disabled Text</div>
        <div class="hint-text" flex>{{vm.themes.active.theme.accent.hue1.contrast3}}</div>
        <div class="hint-text" flex>.md-accent-bg .md-hue-1 .hint-text</div>
    </div>

    <div class="md-accent-bg md-hue-1" flex="100" class="divider" layout="row" layout-padding>
        <div class="fade-text" flex>Fade Text / Divider</div>
        <div class="fade-text" flex>{{vm.themes.active.theme.accent.hue1.contrast4}}</div>
        <div class="fade-text" flex>.md-accent-bg .md-hue-1 .divider</div>
    </div>

    <div flex="100" class="md-accent-fg md-hue-1" layout="row" layout-padding>
        <div flex>As foreground color</div>
        <div flex>{{vm.themes.active.theme.accent.hue1.color}}</div>
        <div flex>.md-accent-fg</div>
    </div>
</div>
<!-- / HUE-1 -->

<!-- HUE-2 -->
<div class="color" layout="row" layout-wrap layout-align="center center">
    <div class="md-accent-bg md-hue-2" flex="100" layout="row" layout-padding>
        <div flex>Hue 2</div>
        <div flex>{{vm.themes.active.theme.accent.hue2.color}}</div>
        <div flex>.md-accent-bg .md-hue-2</div>
    </div>

    <div class="md-accent-bg md-hue-2" flex="100" layout="row" layout-padding>
        <div flex>Primary Text</div>
        <div flex>{{vm.themes.active.theme.accent.hue2.contrast1}}</div>
        <div flex>.md-accent-bg</div>
    </div>

    <div class="md-accent-bg md-hue-2" flex="100" class="secondary-text" layout="row" layout-padding>
        <div class="secondary-text" flex>Secondary Text / Icon</div>
        <div class="secondary-text" flex>{{vm.themes.active.theme.accent.hue2.contrast2}}</div>
        <div class="secondary-text" flex>.md-accent-bg .md-hue-2 .secondary-text</div>
    </div>

    <div class="md-accent-bg md-hue-2" flex="100" class="hint-text" layout="row" layout-padding>
        <div class="hint-text" flex>Hint Text / Disabled Text</div>
        <div class="hint-text" flex>{{vm.themes.active.theme.accent.hue2.contrast3}}</div>
        <div class="hint-text" flex>.md-accent-bg .md-hue-2 .hint-text</div>
    </div>

    <div class="md-accent-bg md-hue-2" flex="100" class="divider" layout="row" layout-padding>
        <div class="fade-text" flex>Fade Text / Divider</div>
        <div class="fade-text" flex>{{vm.themes.active.theme.accent.hue2.contrast4}}</div>
        <div class="fade-text" flex>.md-accent-bg .md-hue-2 .divider</div>
    </div>

    <div flex="100" class="md-accent-fg md-hue-2" layout="row" layout-padding>
        <div flex>As foreground color</div>
        <div flex>{{vm.themes.active.theme.accent.hue2.color}}</div>
        <div flex>.md-accent-fg</div>
    </div>
</div>
<!-- / HUE-2 -->

<!-- HUE-3 -->
<div class="color" layout="row" layout-wrap layout-align="center center">
    <div class="md-accent-bg md-hue-3" flex="100" layout="row" layout-padding>
        <div flex>Hue 3</div>
        <div flex>{{vm.themes.active.theme.accent.hue3.color}}</div>
        <div flex>.md-accent-bg .md-hue-3</div>
    </div>

    <div class="md-accent-bg md-hue-3" flex="100" layout="row" layout-padding>
        <div flex>Primary Text</div>
        <div flex>{{vm.themes.active.theme.accent.hue3.contrast1}}</div>
        <div flex>.md-accent-bg</div>
    </div>

    <div class="md-accent-bg md-hue-3" flex="100" class="secondary-text" layout="row" layout-padding>
        <div class="secondary-text" flex>Secondary Text / Icon</div>
        <div class="secondary-text" flex>{{vm.themes.active.theme.accent.hue3.contrast2}}</div>
        <div class="secondary-text" flex>.md-accent-bg .md-hue-3 .secondary-text</div>
    </div>

    <div class="md-accent-bg md-hue-3" flex="100" class="hint-text" layout="row" layout-padding>
        <div class="hint-text" flex>Hint Text / Disabled Text</div>
        <div class="hint-text" flex>{{vm.themes.active.theme.accent.hue3.contrast3}}</div>
        <div class="hint-text" flex>.md-accent-bg .md-hue-3 .hint-text</div>
    </div>

    <div class="md-accent-bg md-hue-3" flex="100" class="divider" layout="row" layout-padding>
        <div class="fade-text" flex>Fade Text / Divider</div>
        <div class="fade-text" flex>{{vm.themes.active.theme.accent.hue3.contrast4}}</div>
        <div class="fade-text" flex>.md-accent-bg .md-hue-3 .divider</div>
    </div>

    <div flex="100" class="md-accent-fg md-hue-3" layout="row" layout-padding>
        <div flex>As foreground color</div>
        <div flex>{{vm.themes.active.theme.accent.hue3.color}}</div>
        <div flex>.md-accent-fg</div>
    </div>
</div>
<!-- / HUE-3 -->